<template>
  <div class="modal-wrap">
    <a-form-model
      layout="horizontal"
      :model="formData"
      :label-col="{ xxl: { span: 4 }, sm: { span: 6 } }"
      :wrapper-col="{ xxl: { span: 20 }, sm: { span: 18 } }"
    >
      <a-row :span="24">
        <a-col :span="12">
          <a-form-model-item label="指标编码">
            {{ formData.kpiCode }}
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="指标名称">
            {{ formData.kpiName }}
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :span="24">
        <a-col :span="12">
          <a-form-model-item label="指标类型">
            {{ formData.kpiTypeName }}
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="指标周期">
            {{
              formData.kpiCycle === "D"
                ? "日指标"
                : formData.kpiCycle === "M"
                ? "月指标"
                : ""
            }}
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :span="24">
        <a-col :span="12">
          <a-form-model-item label="发布时间">
            {{ formData.releaseTime }}
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="上架时间">
            {{ formData.addDate }}
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :span="24">
        <a-col :span="12">
          <a-form-model-item label="指标分类">
            {{ formData.className }}
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :span="24">
        <a-col :span="24">
          <a-form-model-item
            label="业务口径"
            :label-col="{ xxl: { span: 2 }, sm: { span: 3 } }"
            :wrapper-col="{ xxl: { span: 22 }, sm: { span: 21 } }"
          >
            {{ formData.busiDesc }}
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :span="24">
        <a-col :span="24">
          <a-form-model-item
            label="技术口径"
            :label-col="{ xxl: { span: 2 }, sm: { span: 3 } }"
            :wrapper-col="{ xxl: { span: 22 }, sm: { span: 21 } }"
          >
            {{ formData.technologyDesc }}
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </div>
</template>
<script setup>
const props = defineProps({
  formKey: {
    type: Array,
  },
  formData: {
    type: Object,
  },
  title: {
    type: String,
  },
});
</script>
<style scoped lang="less">
.modal-wrap {
  width: 100%;
  max-height: 500px;
  overflow: hidden;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 0.416667vw;
    height: 0.416667vw;
    background-color: #f8f8f8;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 0.333vw;
    box-shadow: inset 0 0 0.3125vw rgba(175, 175, 175, 0.3);
    background-color: #ebebeb;
  }
}
/deep/ .ant-row.ant-form-item.ant-form-item-with-help {
  margin-bottom: 0;
}
/deep/ .ant-row.ant-form-item {
  margin-bottom: 5px;
}
</style>
